import React, { useState, useEffect } from 'react';
import { MainMenu } from 'base/ctl/menu';
import { Time } from 'base/ctl/base';
import { DlgLog } from 'base/ctl/log';
import { obj_empty, cline, uJob, obj_str, MaTable, Wait, NuiBt, useHigh } from 'sui';
import { loc } from 'local/index';
import { MtTitle } from '../ctl';
import { DlgIn } from './ctl';
import { get_mt, load_pick } from '../cmd';

const Order = ({ umd, wsn, hreturn, cur }) => {
    const [cur_out, curOut] = useState();
    const [open_menu, openMenu] = useState(false);
    const [open_log, openLog] = useState(false);
    const [open_out, openOut] = useState(false);
    const [wait, setWait] = useState(false);
    const [main, setMain] = useState();
    const [high] = useHigh(10, 200)

    useEffect(() => load_pick(null, setMain, "order"), []);

    const hin = (v) => {
        if (obj_empty(cur_out)) {
            alert("入库单为空");
            return;
        }

        setWait(true);

        uJob(null, "stock/order",
            {
                line: cline(),
                sn: obj_str(cur_out, "sn"),
                pos: obj_str(v, "pos"),
            },
            r => {
                load_pick(() => setWait(false), setMain, "order");
            }, e => {
                alert("入库错误");
                setWait(false);
            });
    };

    const menu = [{
        label: loc("base_157"),
        name: "log",
        hcmd: () => openLog(true),
    }];

    const col = [
        {title: "入库单", field: 'sn', width: 100},
        {title: "物料批次号", field: 'bsn', width: 100},
        {title: "物料类型", field: 'mt', width: 100, render: d => get_mt(d.mt)},
        {title: "型号", field: 'tech', width: 100},
        {title: "球径", field: 'ball', width: 100},
        {title: "入库数量", field: 'num', width: 100},
        {title: "入库人", field: 'uname', width: 100},
        {title: loc("client_23"), field: 'e_opt', width: 100, render: d => {
            return <NuiBt className="ml-8 h-16" color="green" hcmd={() => {
                curOut(d);
                openOut(true);
            }}>入库</NuiBt>;
        }}
    ];

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between">
                <div className="inline-flex items-center">
                    <div className="ml-2 mr-4">
                        <MainMenu value={menu} open={open_menu} setOpen={openMenu}/>
                    </div>
                    <MtTitle sub="入库" cur={cur}/>
                </div>
                <Time className="text-2xl"/>
                <NuiBt className="w-32 h-16" hcmd={hreturn}>返回</NuiBt>
            </div>
            <div className="flex flex-row items-start mt-1">
                <div className="flex flex-col w-full">
                    <div style={{ height: `${high - 100}px`, width: "100%" }} className="my-1 border">
                        <MaTable col={col} row={main} page={8} paging={true} search={true}
                        opt={{
                            minBodyHeight: 730,
                            maxBodyHeight: 730,
                        }}/>
                    </div>
                </div>
            </div>
            <DlgLog open={open_log} setOpen={openLog}/>
            <Wait wait={wait}/>
            <DlgIn open={open_out} setOpen={openOut} hcmd={hin} cur={cur_out}/>
        </div>
    );
};

export {Order};
